<template>
    <BasisTable :columns="table_config.table_header" :config="table_config.config" :request="table_config.request">
        <template v-slot:operation="slotData">
            <el-tooltip content="编辑" placement="bottom" effect="light">
                <el-button type="primary" icon="Edit" circle
                    @click="handlerDetailed(slotData.data.userid, slotData.data.projectid, slotData.data.status)" />
            </el-tooltip>
            <el-tooltip content="代码质量评估" placement="bottom" effect="light">
                <el-button type="primary" icon="Orange" circle
                    @click="handlerAssess(slotData.data.userid, slotData.data.projectid, slotData.data.status)" />
            </el-tooltip>
        </template>

    </BasisTable>
    <el-dialog v-model="Upload_dialogVisible" title="上传项目文件" width="50%">
        <Upload @onchange="handleChange" />
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="Upload_dialogVisible = false">关闭</el-button>
                <el-button type="success" @click="submit">提交</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { reactive, provide, ref, getCurrentInstance } from 'vue';
import { useRouter, useRoute } from "vue-router";
import Upload from '../../components/upload/Upload.vue'
import BasisTable from '../../components/table/BasisTable.vue';
import { UploadFile, InfoAnalysis } from "../../api/http.js"
import { inject } from 'vue';
import { requestHook } from '../../components/table/requestHook'

export default {
    name: "ProjectList",
    components: { BasisTable, Upload },
    setup(props) {
        const { proxy } = getCurrentInstance()
        const { push } = useRouter();
        const { go } = useRouter();
        //const {  } = requestHook();

        const reload = inject("reload");
        const search_config = reactive({
            // label_width: "100px",
            // form_button_group: [
            //     { label: "新增", type: "primary", callback: () => addInfo() },
            // ],
        })
        provide("search_config", search_config);

        var login_userid = localStorage.getItem("userid")
        const table_config = reactive({
            table_header: [
                { label: "项目编号", prop: "projectid" },
                { label: "项目名称", prop: "name" },
                { label: "项目版本", prop: "version" },
                { label: "分析状态", prop: "status" },
                { label: "上次修改时间", prop: "lastupdate" },
                { label: "操作", type: "slot", slot_name: "operation", delete_elem: true, },
            ],
            config: {},
            request: {
                url: "info",
                data: {
                    //pageNumber: 1,
                    //pageSize: 10,
                    userid: login_userid,
                },
                delete_key: "projectid"
            }
        })
        const updateProjectFile = reactive({
            projectid: "",
        })


        const Upload_dialogVisible = ref(false)
        /** 编辑 */
        const handlerDetailed = (userid, projectid, status) => {
            //window.location.reload()
            //console.log(status)
            if (status == "请重新上传文件" || status == "分析失败") {
                //打开对话框
                Upload_dialogVisible.value = true
                updateProjectFile.projectid = projectid
            } else if (status !== "分析成功") {
                //proxy.$message.error("代码解析未完成!");
                const req = {
                    projectid,
                }//得到添加项目成功后返回响应内容的项目id
                console.log("projectid=>", req)
                /** 启动分析 */
                InfoAnalysis(req).then(resAnalysis => {
                    proxy.$message.info(status);
                    if (resAnalysis.data.code === 200) {
                       // window.location.reload()
                        //proxy.$message.success("解析完成！");
                    }
                    window.location.reload()
                }).catch(error => {
                    console.log(error);
                })
            } else {
                push({
                    path: "/home/projectEdit",
                    query: { userid, projectid }
                })
            }
        }

        // 上传文件数组
        const fileList = ref([])

        // 文件改变时回调钩子
        const handleChange = (file, files) => {

            // file是当前上传的文件，files是当前所有的文件，
            //const isZIP = file.type === 'application/x-zip-compressed' //限制上传zip格式文件
            const isZIP = file.name.substring(file.name.lastIndexOf('.') + 1) === 'zip'
            const isLt10M = file.size / 1024 / 1024 < 10    //文件大小不能超过10MB
            if (!isZIP) {
                proxy.$message.error("上传文件只能是ZIP格式!");
                files.splice(-1, 1);//从文件列表中删除
                return false
            }
            if (!isLt10M) {
                proxy.$message.error("上传文件大小不能超过10MB!");
                files.splice(-1, 1);
                return false
            }
            fileList.value = files
            console.log(fileList)
            fileList.value.forEach(item => {
                //这里有个坑， item其实并不是真是数据 item.raw才是
                console.log(item)
            })
        }
        /** 重新上传项目文件的提交按钮功能 */
        const submit = () => {
            if (fileList.value.length === 0) {
                proxy.$message.error("请选择需要上传的文件!");
            }
            else {
                const form = new FormData()
                fileList.value.forEach(item => {
                    form.append('files', item.raw)
                })
                form.append('projectid', updateProjectFile.projectid)
                //console.log(form.get('files'));
                UploadFile(form).then(response => {
                    if (response.data.code === 200) {
                        console.log(response.data)
                        // 弹窗提示
                        proxy.$message.success("添加成功!");
                        // 关闭对话框
                        Upload_dialogVisible.value = false
                        const req = {
                            projectid: response.data.data.projectid,
                        }//得到添加项目成功后返回响应内容的项目id
                        console.log("req=>", req)

                        /** 启动分析 */
                        InfoAnalysis(req).then(resAnalysis => {
                            if (resAnalysis.data.code === 200) {
                               //window.location.reload()
                                //proxy.$message.success("解析完成！");
                                // push({
                                //     path: "/projectViewTotal/projectWholeInfo",
                                // })
                                //localStorage.setItem("projectid", projectid)
                            }
                            window.location.reload()
                        }).catch(error => {
                            console.log(error);
                        })
                    }
                }).catch(error => {
                    console.log(error);
                    console.log('error submit!!')
                    proxy.$message.error("添加失败!");
                    return false
                })

            }
        }
        const addInfo = () => {
            push({
                path: "/home/projectAdd"
            })
        }

        /** 质量分析评估 */
        const handlerAssess = (userid, projectid, status) => {

            if (status == "请重新上传文件" || status == "分析失败") {
                //打开对话框
                Upload_dialogVisible.value = true
                updateProjectFile.projectid = projectid
            }else if (status !== "分析成功") {
                //proxy.$message.error("代码解析未完成!");
                const req = {
                    projectid,
                }//得到添加项目成功后返回响应内容的项目id
                console.log("projectid=>", req)
                /** 启动分析 */
                InfoAnalysis(req).then(resAnalysis => {
                    proxy.$message.info(status);
                    if (resAnalysis.data.code === 200) {
                        //window.location.reload()
                        //proxy.$message.success("解析完成！");
                        // push({
                        //     path: "/projectViewTotal/projectWholeInfo",
                        // })
                        // localStorage.setItem("projectid", projectid)
                    }
                    window.location.reload()
                }).catch(error => {
                    console.log(error);
                })
            } else {
                push({
                    path: "/projectViewTotal/projectWholeInfo",
                    //query: { userid,projectid }
                })
                localStorage.setItem("projectid", projectid)
            }
        }
        return {
            table_config,
            updateProjectFile,
            handlerDetailed,
            addInfo,
            handlerAssess,
            Upload_dialogVisible,
            submit,
            handleChange,

        }
    }

}
</script>

<style scoped>
.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>